import { Image, Grid, Card, Button, Flex } from 'react-vant';
import { useEffect, useState } from 'react';
import { history, connect } from 'umi';
import { mapStar, mapStarItem } from '@/utils/myinterface';
import { mapData } from '@/utils/noTrueData';
import * as _ from 'lodash';
const src = 'https://img.yzcdn.cn/vant/cat.jpeg';
// let count = 0
export default connect(({ index }) => ({ account: index.account }))((props) => {
  // console.log('props', props);
  const [mapStar, setMapStar] = useState<mapStar | null>(null);
  const [curCell, setCurCell] = useState<number>(0);
  const [spriteArry, setSpriteArry] = useState<Array<string>>([]);
  useEffect(() => {
    let mapStar = mapData().filter((item) => item.id == props.mapId)[0];
    setMapStar(mapStar);
  }, []);
  useEffect(() => {
    WildAnima();
  }, [mapStar, curCell]);
  //野生精灵
  const WildAnima = () => {
    let spriteArry;
    if (
      mapStar &&
      mapStar.mapStarArry[curCell] &&
      mapStar.mapStarArry[curCell].sprite.length > 0
    ) {
      spriteArry = Array.from(
        Array(3),
        (v, i) => _.sampleSize(mapStar.mapStarArry[curCell].sprite)[0],
      );
      setSpriteArry(spriteArry);
      // console.log('srpite', spriteArry);
    }
  };
  return (
    <>
      <Card round>
        <Card.Header border>
          {mapStar && mapStar.mapStarArry[curCell].name}
        </Card.Header>
        <Card.Body
          style={{
            height: '20vh',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Grid columnNum={3}>
            {spriteArry &&
              spriteArry.length > 0 &&
              spriteArry.map((item, index) => (
                <Grid.Item key={index}>
                  {' '}
                  <Button
                    type="primary"
                    onClick={() => history.push(`/battle?spriteName=${item}`)}
                  >
                    {item}
                  </Button>
                </Grid.Item>
              ))}
          </Grid>
        </Card.Body>
        <Card.Footer border>
          <Flex>
            {!!curCell && curCell > 0 && (
              <Button
                type="primary"
                block
                round
                size="mini"
                onClick={() => setCurCell(curCell - 1)}
              >
                上一层
              </Button>
            )}
            {mapStar && curCell < mapStar.mapStarArry.length - 1 && (
              <Button
                type="primary"
                block
                round
                size="mini"
                onClick={() => setCurCell(curCell + 1)}
              >
                下一层
              </Button>
            )}
          </Flex>
        </Card.Footer>
      </Card>
    </>
  );
});
